<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入用户名" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
            <a-col :md="1" :sm="24" :offset="14">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="uid"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <div slot="owner" slot-scope="record">
          <a-tag v-if="findStoreName({ storeid: record.clothes_store_id, storeType: 'clothesList' })" color="cyan">
            {{ findStoreName({ storeid: record.clothes_store_id, storeType: 'clothesList' }) }}
          </a-tag>
          <a-tag v-if="findStoreName({ storeid: record.appliance_store_id, storeType: 'applianceList' })" color="blue">
            {{ findStoreName({ storeid: record.appliance_store_id, storeType: 'applianceList' }) }}
          </a-tag>
          <a-tag v-if="findStoreName({ storeid: record.house_store_id, storeType: 'houseList' })" color="green">
            {{ findStoreName({ storeid: record.house_store_id, storeType: 'houseList' }) }}
          </a-tag>
        </div>
        <a-tag :color="text == 1 ? 'blue' : 'red'" slot="status" slot-scope="text">{{ text | statusFilter }}</a-tag>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </template>
        </span>
      </s-table>

      <create-form ref="createModal" @ok="handleSearch" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { managerList, managerDel, getStoreList } from '@/api/managerStore'
import formTableMixin from '@/mixins/formTableMixin'
import CreateForm from './modules/managerStoreForm'

const columns = [
  {
    title: '用户名',
    dataIndex: 'name'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    customRender (text) {
      if (text === 1) {
        return '男'
      } else if (text === 2) {
        return '女'
      }
    }
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '角色',
    dataIndex: 'role_name'
  },
  {
    title: '所属门店',
    scopedSlots: { customRender: 'owner' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const STATUS = {
  1: '可查看',
  0: '不可查看',
  null: '不可查看'
}

export default {
  name: 'ManagerStore',
  mixins: [formTableMixin],
  components: {
    CreateForm
  },
  data () {
    this.columns = columns
    this.listAction = managerList
    this.delAction = managerDel
    return {
      storeList: {
        applianceList: [],
        clothesList: [],
        houseList: []
      }
    }
  },
  filters: {
    statusFilter (key) {
      return STATUS[key]
    }
  },
  created () {
    getStoreList().then(res => {
      this.storeList.applianceList = res.data.appliance
      this.storeList.clothesList = res.data.clothes
      this.storeList.houseList = res.data.house
    })
  },
  methods: {
    findStoreName ({ storeid, storeType }) {
      const storeName = this.storeList[storeType].find(item => item.id === storeid)
      return (storeName && storeName.name) || undefined
    }

  }
}
</script>
